import { IWarnInfo } from '@/types/pages/materialStore/interface'
import ChartGauge from '@/components/pages/chartGauge'
import AddAndDel from '@/components/pages/customer/addAndDel'
import React, { FC } from 'react'
import styled from "styled-components"
import Title from '@/components/pages/titleNoImg'
const Count = styled.div`
        flex: 1;
        padding-top: 2rem;
        display:flex;
        flex-direction: column;
        font-size: 1.4rem;
        color: #fff;
        align-items: center;
        justify-content: center;
        background-color: rgba(6,31,79,.5);
        .top{
            flex: 1 1 60%;
            width: 27rem;
            height: 35rem;

        }
        .bottom{
            flex: 1 1 40%;
        }
`

const Content: FC<Partial<IWarnInfo>> = function (props) {

  return (
    <Count>
      <div className='top'>
        <ChartGauge title=""{...props.chart}><Title name={props.chart?.title} /></ChartGauge>
      </div>
      <div className='bottom'>
        <AddAndDel
          addText={props.inventoryText!}
          addUnit={props.overstockUnit}
          addNum={props.inventory!}
          freeze={props.overstockText!}
          freezeUnit={props.overstockUnit}
          freezeNum={props.overstock!} />
      </div>
    </Count>
  )
}

export default Content
